import { Spin } from 'antd'
import React, { Component } from 'react'
import { commonQueryByCode } from '@/service/document/documentService'
import { Link } from 'react-router-dom'

import './index.less'

class RankCard extends Component {

    constructor(props) {
        super(props)
        this.state = {
            loading: true,
            title: '博客排行',
            blogList: []
        }
    }

    async componentDidMount() {
        const { commandCode } = this.props //语句配置标识
        let blogList = []
        if (commandCode) {
            const response = await commonQueryByCode({ commandCode })
            if (response && response.data && response.data.documents) {
                blogList = response.data.documents.map(item => item.content)
            }
        }
        if (Array.isArray(blogList) && blogList.length > 0) {
            await new Promise(resolve => {
                this.setState({
                    loading: false,
                    title: this.props.title ? this.props.title : '博客排行',
                    blogList
                }, resolve)
            })
        }
    }

    render() {
        if (this.state.loading === true) return <Spin />
        return (
            <>
                <div className="ranking-container">
                    <div className="ranking-title">{this.state.title}</div>
                    <ul className="ranking-list">
                        {
                            this.state.blogList.map((item, index) => {
                                return (
                                    <li key={item.id}>
                                        <div className="rank">{index + 1}</div>
                                        <div className="name"><Link to={`/${item.customerId}/blog/${item.id}`}>{item.blogTitle}</Link></div>
                                        <div className="score">{item.score}</div>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
            </>
        )
    }
}

export default RankCard